<template>
    <view>
        <view v-if="cartsList.length === 0" class="null">
            空空如也
            <image src="/static/空购物车.png" class="empty-cart-image" />
        </view>
        <view v-else class="card">
            <view class="header">
                <checkbox-group @change="toggleAllCheck">
                    <checkbox :checked="isAllChecked">全选</checkbox>
                </checkbox-group>
                <button @click="clearCart">清空购物车</button>
            </view>
            <view class="body" v-for="(item, index) in cartsList" :key="item._id">
                <checkbox :checked="item.checked"  @click="doChecked(item)"></checkbox>
                <image :src="item.imgUrl" />
                <view class="product-info">
                    <view class="name">{{ item.name }}</view>
                    <view class="sales">月售{{ item.sales }}件</view>
                    <view class="price">
                        <view class="new_old">
                            <view class="new">￥{{ item.price }}</view>
                            <view class="old">￥{{ item.oldPrice }}</view>
                        </view>
                        <view class="sum">
                            <button @click="dele(index)">-</button>
                            <view>{{item.quantity }}</view>
                            <button @click="add(index)">+</button>
                        </view>
                    </view>
                </view>
            </view>
            <view class="foot">
                <view>总计：<text>￥{{num}}</text></view>
                <button @click="checkout">去结算</button>
            </view>
        </view>
    </view>
</template>
<script>
import axios from "axios"
export default {
    data() {
      return {
        cartsList: [],
        isAllChecked: true
      }
    },
    onShow() {
      this.numcarts()
    },
    methods: {
      numcarts() {
        uni.request({
          url: "http://localhost:3000/cart",
          success: (res) => {
            this.cartsList = res.data
            // 循环遍历 数据 给每个数据项添加checked属性   = true
            res.data.forEach(item => {
              this.$set(item, 'checked', true);
            });
          }
        })
      },
      add(index) {
        this.cartsList[index].quantity++
      },
      dele(index) {
        const item = this.cartsList[index];
        if (this.cartsList[index].quantity > 1) {
          this.cartsList[index].quantity--;
        } else if (this.cartsList[index].quantity === 1) { 
          this.cartsList.splice(index, 1);
        }
      },
      clearCart() {
        axios.get("http://localhost:3000/cart")
        .then(res => {
          const items = res.data;
          const deletePromises = items.map(item => {
            return axios.delete(`http://localhost:3000/cart/${item.id}`)
            .then(() => {
                console.log(`ID 为 ${item.id} 的记录已删除`);
                uni.showToast({
                  title: '清除成功',
                })
            })
          })
          Promise.all(deletePromises).then(() => {
            window.location.reload();
          })
        })
      },
          
      toggleAllCheck() {
        this.isAllChecked = !this.isAllChecked;
        this.cartsList.forEach(item => {
          item.checked = this.isAllChecked;
        });
      },
      checkout() {
        uni.navigateTo({
          url: "/pages/adress/index"
        })
      },
      doChecked(item) {
          item.checked = !item.checked;
          // 更新全选状态
          this.isAllChecked = this.cartsList.every(product => product.checked);
      }
    },
    computed: {
      num() {
        return this.cartsList.reduce((total, item) => {
          return total + (item.checked ? item.price * item.quantity : 0);
        }, 0).toFixed(2);
      },
    },
}
</script>

<style>
.null {
  height: 500px;
  font-size: 40px;
  color: gray;
  line-height: 150px;
  margin: 0 auto;
  text-align: center;
}
.empty-cart-image {
  display: block;
  margin: 20px auto;
  width: 500px;
  height: 500px;
}
.card {
  background-color: rgb(251, 252, 247);
  margin: 30px;
  padding: 0 30px;
}
.header {
  display: flex;
  align-items: center;
  height: 70px;
  border-bottom: 1px solid rgb(189, 187, 187);
}
.header checkbox {
  line-height: 70px;
  font-size: 20px;
}
.header button {
   width: 100px;
    height: 40px;
    font-size: 14px;
    background-color: rgb(252, 247, 247);
    margin-right: 10px;
    border: none;
}
.body {
  display: flex;
  padding: 18px 0;
  border-bottom: 1px solid #c2c1c1;
}
.body checkbox {
  display: flex;
  justify-content: center;
  margin-right: 15px;
}
.body image {
  width: 100px;
  height: 100px;
  margin-right: 15px;
}
.product-info {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.name {
  font-size: 18px;
  font-weight: 800;
}
.sales {
  font-size: 16px; 
}
.price {
  display: flex;
  justify-content: space-between;
}
.new_old {
    display: flex;
    justify-content: space-between;
}
.new {
  font-size: 18px;
  color: red;
  margin-right: 10px;
}
.old {
  color: gray;
  text-decoration: line-through;
}
.sum {
  display: flex;
}
.sum button {
  width: 25px;
  height: 20px;
  border-radius: 10%;
  line-height: 20px;
  text-align: center;
  font-size: 10px;
}
.foot {
  display: flex;
  justify-content: space-between;
  height: 70px;
}
.foot view {
  line-height: 70px;
}
.foot text {
  color: red;
  font-size: 22px;
}
.foot button {
  background-color: rgb(57, 156, 248);
  color: #fff;
  line-height: 70px;
  width: 120px;
  margin-right: -30px;
}
</style>    